<template>
  <view class="moneyShow">
    <view class="photo">
      <image src="https://alixeu-test.oss-cn-guangzhou.aliyuncs.com/achobate/iu3.png" mode=""></image>
    </view>
    <view class="moneyChose">
      <view
        :class="singleIf === true ? 'chosed' : 'unchosed'"
        @click="choseSingle"
      >
        单项经费
      </view>
      <view
        :class="singleIf === true ? 'unchosed' : 'chosed'"
        @click="choseActivity"
      >
        活动经费
      </view>
    </view>

    <view class="moneyList" v-if="singleIf">
      <view class="moneyItem" v-for="(singleItem, index) in singleActList">
        <view class="date">
          {{ singleItem.rightTimeValue}}
        </view>
        <view class="itemName">
          {{ singleItem.eventName }}
        </view>
      </view>
    </view>

    <view class="moneyList" v-if="!singleIf">
      <view
        class="moneyItem"
        v-for="(activityItem, index) in activityMoneyList"
      >
        <view class="date">
          {{ activityItem.dateNum }}
        </view>
        <view class="itemName">
          {{ activityItem.actName }}
        </view>
      </view>
    </view>

    <view class="words"> ----没有更多了---- </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getSinglePriceListFn } from '../../../utils/modules/finance.js'

getSinglePriceListFn({}).then((res) => {
  singleActList.value = res.data.data
  for (let i = 0; i < singleActList.value.length; i++) {
    const rightTime = getTime(singleActList.value[i].time)
    singleActList.value[i].rightTimeValue = rightTime
  }
})

function getTime(chuo) {
  var date = new Date(chuo);
  // console.log(new Date());
  var year = date.getFullYear()
  var month = ('0' + (date.getMonth() + 1)).slice(-2)
  var sdate = ('0' + date.getDate()).slice(-2)
  var hour = ('0' + date.getHours()).slice(-2)
  var minute = ('0' + date.getMinutes()).slice(-2)
  var second = ('0' + date.getSeconds()).slice(-2)
  // 拼接
  var result = year + '.' + month + '.' + sdate + ' ' + hour + ':' + minute //+ ":" + second;
  console.log(result);
  return result
  // 返回
}

const singleIf = ref(true)
function choseSingle() {
  singleIf.value = true
}
function choseActivity() {
  singleIf.value = false
}
const singleActList = ref([])
const activityMoneyList = ref([
  {
    dateNum: '2022-07-01',
    actName: '我是活动经费'
  },
  {
    dateNum: '2022-07-09',
    actName: '我是活动经费'
  },
  {
    dateNum: '2022-07-22',
    actName: '我是活动经费'
  },
  {
    dateNum: '2022-07-22',
    actName: '我是活动经费'
  },
  {
    dateNum: '2022-07-22',
    actName: '我是活动经费'
  }
])
</script>

<style lang="scss">
.moneyShow {
  padding: 24rpx;
  padding: 5%;
  margin: 10rpx;
  background: linear-gradient(to right, #87d5f2, #99a9bf);
  border-radius: 20rpx;
  min-height: 1500rpx;

  .photo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15rpx;
    height: 380upx;

    .image {
      height: 380upx;
      border-radius: 20rpx;
    }
  }

  .moneyChose {
    display: flex;
    flex-direction: row;
    margin-left: 5%;
    margin-top: 20rpx;
    width: 90%;
    background: #808b8e;
    border-radius: 10rpx;
    height: 100rpx;
    .unchosed {
      display: flex;
      font-size: 30rpx;
      height: 80rpx;
      width: 45%;
      // background: #e8e8e8;
      margin: 10rpx;
      border-radius: 10rpx;
      // color: #5288f7;
      justify-content: center;
      align-items: center;
    }
    .chosed {
      height: 80rpx;
      width: 45%;
      background: #e8e8e8;
      margin: 10rpx;
      margin-left: 25rpx;
      border-radius: 10rpx;
      display: flex;
      color: #5288f7;
      justify-content: center;
      align-items: center;
      font-size: 35rpx;
      font-weight: 600;
    }
  }

  .moneyList {
    margin-left: 2%;
    width: 90%;
    margin-top: 20rpx;
    .moneyItem {
      margin-top: 20rpx;
      .date {
        color: #808b8e;
        margin-left: 10rpx;
      }
      .itemName {
        display: flex;
        align-items: center;
        box-shadow: rgba(99, 99, 99, 0.2) 5rpx 5rpx 8rpx 5rpx;
        font-size: 40rpx;
        padding-left: 50rpx;
        border-radius: 10rpx;
        width: 100%;
        height: 100rpx;
        background: #fff;
      }
    }
  }

  .words {
    display: flex;
    justify-content: center;
    margin: 50rpx 0;
  }
}
</style>

<style scoped lang="scss">
.wrap {
  padding: 24rpx;
}

.u-row {
  margin: 40rpx 0;
}

.demo-layout {
  height: 80rpx;
  border-radius: 8rpx;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>